<template>
    <div class="main">
        <div class="search">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>机房号码查询</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="search1">
                <el-input v-model="input" placeholder="请输入机房号" prefix-icon="el-icon-search"  v-on:click.native="demon"></el-input>
            </div>
        </div>
        <div class="table1">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column type="expand">
                    <template>
                        <el-input></el-input>
                    </template>
                    <template slot-scope="props">
                        <el-form label-position="left" class="demo-table-expand">
                            <el-form-item label="上机节数：">
                                <span>{{ props.row.section }}</span>
                            </el-form-item>
                            <el-form-item label="上机教室：">
                                <span>{{ props.row.laboratoryId }}</span>
                            </el-form-item>
                            <el-form-item label="上机课程：">
                                <span>{{ props.row.courseId }}</span>
                            </el-form-item>
                            <el-form-item label="上机班级：">
                                <span>{{ props.row.classId }}</span>
                            </el-form-item>
                            <el-form-item label="任课教师：">
                                <span>{{ props.row.user }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="上机周数" prop="week">
                </el-table-column>
                <el-table-column label="机房号码" prop="laboratoryId">
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="200" @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      tableAll1: [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
      currentPage: 1,
      input2: '',
      input: ''
    }
  },
  async created () {
    await this.$http.get(
      '/arrange/findAll',
      { 'Content-Type': 'application/json' }
    ).then(res => {
      console.log(res.data.datas.AllArrange)
      for (let i = 0; i < 20; i++) {
        for (let j = 0; j < res.data.datas.AllArrange.length; j++) {
          if (res.data.datas.AllArrange[j].week === i + 1) {
            this.tableAll1[i].push(res.data.datas.AllArrange[j])
          }
        }
      }
      this.tableData = this.tableAll1[0]
    })
  },
  methods: {
    current_change: function (currentPage) {
      currentPage = currentPage - 1
      this.tableData = this.tableAll1[currentPage]
      console.log(this.tableData)
    }
  }
}
</script>

<style lang="less" scoped>
.main{
    height: 100%;
    width: 100%;
    overflow: auto;
    .search{
        height: 8%;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .search1{
            height: 50%;
            width: 20%;
            position: relative;
            top: 0px;
            left: 70%;
        }
        .el-breadcrumb{
          position: relative;
          top: 8px;
        }
    }
    .table1{
        height:72%;
        width: 80%;
        overflow: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,0);
        position: relative;
        top: 50px;
        .el-pagination{
            position: relative;
            top: 40px;
        }
    }
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
